<template>
  <div id="form_table">
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="108px" :inline="true">
      <el-table :data="formData.tableData" style="width: 100%" border>
        <el-table-column type="index" width="55" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" resizable align="center" header-align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.name">
              <el-input type="text" size="small" placeholder="请输入姓名" v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="age" resizable align="center" header-align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.age'" :rules="rules.age">
              <el-input type="text" size="small" placeholder="请输入年龄" v-model="scope.row.age"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" resizable align="center" header-align="center">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.sex'" :rules="rules.sex">
              <el-input type="text" size="small" placeholder="请输入性别" v-model="scope.row.sex"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item class="footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button>取消</el-button>
        <el-button @click="pageTo">跳转</el-button>
      </el-form-item>
    </el-form>
    <div class="chart_box">
      <div class="gauge_charts" style="width: 280px; height: 140px"></div>
      <!-- <img src="~@/assets/logo.png" alt="" />
    <img src="/imgs/logo.png" alt="" /> -->
      <div class="gauge_charts2" style="width: 220px; height: 200px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  data() {
    return {
      formData: {
        tableData: [
          { name: "张三", age: 18, sex: "" },
          { name: "李四", age: 19, sex: "" },
        ],
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
      },
    }
  },
  methods: {
    //保存
    save() {
      this.$refs.formRef.validate(valid => {
        console.log("valid", valid)
        if (valid) {
          //如果valid为true，表示校验通过，可以提交表单，调取接口进行保存
          console.log("表单校验通过")
        } else {
          this.$message.warning("请填写完整的数据")
        }
      })
    },
    pageTo() {
      this.$router.push("/loadshDemo")
    },
    chartsInit() {
      let option = {
        grad: {
          top: 10,
          left: 10,
          right: 10,
          bottom: 10,
        },
        graphic: [
          {
            type: "image",
            left: "25.5%",
            top: "16%",
            style: {
              // image: require("./logo.png"),
            },
          },
        ],
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            splitNumber: 5,
            center: ["50%", "130"],
            radius: "95",
            pointer: {
              offsetCenter: [0, "10"],
              // icon: "image://http://localhost:7100/zw-base/imgs/z1z.svg",
              // icon: "image://imgs/zz.svg",
              icon: "image://http://172.18.10.9:5099/zw-base/img/zz.6c6f3ee6.svg",

              // icon: "image://" + require("./logo.png"),
              length: "90%",
              width: 20,
            },
            progress: {
              show: false,
              width: 12,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 12,
                shadowBlur: 0,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgba(42, 131, 228, 1)",
                      },
                      {
                        offset: 0.3,
                        color: "rgba(42, 131, 228, 1)",
                      },
                      {
                        offset: 0.6,
                        color: "rgba(67, 253, 255, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(60, 255, 170, 1)",
                      },
                    ]),
                  ],
                ],
              },
            },
            axisLabel: {
              distance: -60,
              color: "rgba(255, 255, 255, 0.6)",
              fontSize: 14,
              formatter: "{value}%",
            },
            /* anchor: {
              show: false,
              showAbove: true,
              size: 14,
              itemStyle: {
                borderWidth: 4,
              },
            }, */
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 50,
              },
            ],
          },
        ],
      }
      if (!this._myChart2) {
        this._myChart2 = echarts.init(document.querySelector(".gauge_charts"))
      }
      this._myChart2.setOption(option)
    },
    chartsInit2() {
      const datas = [
        {
          value: 100,
          title: "正常",
        },
        {
          value: 44,
          title: "报警",
        },
        {
          value: 60,
          title: "离线",
        },
      ]
      const count = datas.reduce((nVal, oVal) => nVal + oVal.value, 0)

      const getCoordinates = (startArc, endArc) => {
        const posi = [Math.sin(startArc), -Math.cos(startArc), Math.sin(endArc), -Math.cos(endArc)]
        const dx = posi[2] - posi[0]
        const dy = posi[3] - posi[1]

        return getLocation(dx, dy)
      }

      const getLocation = (dx, dy) => {
        const tanV = dx / dy
        const directSign = Math.abs(tanV) < 1
        const t = directSign ? tanV : 1 / tanV

        const sign1 = t > 0 ? 1 : -1
        const sign2 = dx > 0 ? 1 : -1
        const sign = directSign ? sign1 * sign2 : sign2

        const group1 = [0.5 - (sign * t) / 2, 0.5 + (sign * t) / 2]
        const group2 = sign > 0 ? [0, 1] : [1, 0]
        const group = [...group1, ...group2]
        const keys = directSign ? ["x", "x2", "y", "y2"] : ["y", "y2", "x", "x2"]

        let res = {}
        keys.forEach((k, idx) => {
          res[k] = group[idx]
        })
        return res
      }
      let option = {
        backgroundColor: "#fff",
        series: [
          {
            startAngle: 225,
            endAngle: -45,
            name: "外部进度条",
            type: "gauge",
            radius: "90%",
            splitNumber: 5,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: [
                  [(datas[0].value + datas[1].value) / count, `rgba(50, 102, 246, 1)`],
                  [(datas[0].value + datas[1].value) / count + datas[2].value / count, `rgba(173, 185, 204, 1)`],
                  [1, `rgba(173, 185, 204, 1)`],
                ],
                width: 0,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              distance: -2,
              splitNumber: 20,
              length: 10,
              lineStyle: {
                color: "auto",
                width: 1.5, // 虚线
              },
            },
            data: [
              {
                value: 100,
                name: "点位总数",
              },
            ],
            pointer: {
              show: false,
            },
            title: {
              offsetCenter: [0, "30%"],
              fontSize: 14,
            },
            detail: {
              offsetCenter: [0, "-5%"],
              fontSize: 28,
              fontWight: "blod",
            },
          },
          {
            z: 2,
            type: "pie",
            radius: ["74%", "78%"],
            startAngle: 225,
            endAngle: -45,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: datas[0].value,
                name: "正常",
                itemStyle: {
                  color: "rgba(100, 149, 249, 1)",
                },
              },
              {
                value: datas[1].value,
                name: "报警",
                itemStyle: {
                  color: "rgba(255, 65, 43, 1)",
                },
              },
            ],
          },
          {
            z: 1,
            type: "pie",
            radius: ["59%", "75%"],
            startAngle: 225,
            endAngle: -45,
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: datas[0].value,
                name: "正常",
                itemStyle: {
                  color: {
                    type: "linear",
                    ...getCoordinates(225, 225 - 270 * (datas[0].value / (datas[0].value + datas[1].value))),
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(100, 149, 249, 0.10)",
                      },
                      {
                        offset: 1,
                        color: "rgba(50, 102, 246, 0.6)",
                      },
                    ],
                  },
                },
              },
              {
                value: datas[1].value,
                name: "报警",
                itemStyle: {
                  color: {
                    type: "linear",
                    ...getCoordinates(270 * (datas[0].value / (datas[0].value + datas[1].value)), -45),
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(248, 110, 110, 0.10)",
                      },
                      {
                        offset: 1,
                        color: "rgba(255, 65, 43, 0.6)",
                      },
                    ],
                  },
                },
              },
            ],
          },
        ],
      }

      // ====================
      if (!this._myChart2) {
        this._myChart2 = echarts.init(document.querySelector(".gauge_charts2"))
      }
      this._myChart2.setOption(option)
    },
  },
  mounted() {
    // this.chartsInit()
    this.chartsInit2()
  },
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 50px;
}
.gauge_charts {
  border: 1px solid #000;
  margin: 30px;
  background: url("./kd.svg") no-repeat 50% 60px;
}
.chart_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
